<template>
  <div class="form">
    <el-dialog
      v-dialogDrag
      class="transferDialog tiny-mce-dialog"
      :close-on-press-escape="true"
      :show-close="true"
      center
      :modal="false"
      title="货源货运发布"
      width="850px"
:visible.sync="isShow" :close-on-click-modal="false"
      @close="cancel"
    >
      <vue-scroll>
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="100px">
          <el-card class="box-card">
            <div slot="header">
              <span>类目</span>
            </div>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="出发地" prop="shipDetailAddress" label-width="80px">
                  <el-input
                    v-model="form.shipDetailAddress"
                    class="noBg"
                    placeholder="请选择地址"
                    clearable
                    maxlength="50"
                    :disabled="true"
                  >
                    <el-button slot="append" icon="el-icon-location-outline" @click="selectShipAddress" />
                  </el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="出发地简称" prop="startAddress" label-width="100px">
                  <el-input v-model="form.startAddress" placeholder="" clearable maxlength="50" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="出发详细地址" prop="shipAddress" label-width="100px">
                  <el-input v-model="form.shipAddress" placeholder="" clearable maxlength="50" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="到达地" prop="receiveDetailAddress" label-width="80px">
                  <el-input
                    v-model="form.receiveDetailAddress"
                    class="noBg"
                    placeholder="请选择地址"
                    clearable
                    maxlength="50"
                    :disabled="true"
                  >
                    <el-button slot="append" icon="el-icon-location-outline" @click="selectReceiveAddress" />
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="到达地简称" prop="endAddress" label-width="100px">
                  <el-input v-model="form.endAddress" placeholder="" clearable maxlength="50" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="到达详细地址" prop="receiveAddress" label-width="100px">
                  <el-input v-model="form.receiveAddress" placeholder="" clearable maxlength="50" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="货物名称" prop="name" label-width="80px">
                  <el-input v-model="form.name" clearable maxlength="20" />
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="货物类型" prop="freightTransportCode" label-width="80px">
                  <el-select v-model="form.freightTransportCode" size="mini" filterable placeholder="请选择货物类型" @change="selectFreightTypeCode">
                    <el-option
                      v-for="item in freightTypeCodes"
                      :key="item.idStr"
                      :label="item.cname"
                      :value="item.idStr"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>

          <el-card class="box-card">
            <div slot="header">
              <span>费用</span>
            </div>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="货物数量" prop="weight" label-width="80px">
                  <el-input v-model="form.weight" clearable />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="运输费" prop="freightPrice" label-width="80px">
                  <el-input v-model="form.freightPrice" clearable placeholder="运输费">
                    <template slot="append">元/吨</template>
                  </el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="装车费" prop="loadFee" label-width="80px">
                  <el-input v-model="form.loadFee" clearable placeholder="装车费">
                    <template slot="append">元</template>
                  </el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="卸车费" prop="unloadFee" label-width="80px">
                  <el-input v-model="form.unloadFee" clearable placeholder="卸车费">
                    <template slot="append">元</template>
                  </el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="信息费" prop="infoFee" label-width="80px">
                  <el-input v-model="form.infoFee" clearable placeholder="信息费">
                    <template slot="append">元</template>
                  </el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="磅费" prop="poundsFee" label-width="80px">
                  <el-input v-model="form.poundsFee" clearable placeholder="运输费">
                    <template slot="append">元</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
          <el-card class="box-card">
            <div slot="header">
              <span>收货人信息</span>
            </div>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="姓名" prop="receiveName" label-width="80px">
                  <el-input v-model="form.receiveName" clearable placeholder="收货人姓名" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系电话" prop="receivePhone" label-width="80px">
                  <el-input v-model="form.receivePhone" clearable placeholder="收货人电话" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
          <el-card class="box-card">
            <div slot="header">
              <span>拉货时间</span>
            </div>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="开始时间" prop="startDate" label-width="80px">
                  <el-date-picker
                    v-model="form.startDate"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    type="datetime"
                    placeholder="选择日期时间"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="结束时间" prop="endDate" label-width="80px">
                  <el-date-picker
                    v-model="form.endDate"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    type="datetime"
                    placeholder="选择日期时间"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>

          <el-card class="box-card">
            <div slot="header">
              <span>运输公司</span>
            </div>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="是否指定运输公司" prop="radio" label-width="140px">
                  <el-radio-group v-model="form.isAppoint">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col v-if="form.isAppoint === 1 " :span="12">
                <el-form-item label="运输公司" prop="transportAssign" label-width="80px">
                  <el-select v-model="form.transportAssign" multiple collapse-tags filterable placeholder="请选择" clearable style="width: 285px;" class="filter-item" @change="selectMerchant">
                    <el-option
                      v-for="item in transports"
                      :key="item.userId"
                      :label="item.merchantName"
                      :value="item.userId"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>

          <el-card class="box-card">
            <div slot="header">
              <span>其它</span>
            </div>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="进矿预计排队时间" prop="joinMouthTime" label-width="140px">
                  <el-input v-model="form.joinMouthTime" clearable placeholder="进矿预计排队时间">
                    <template slot="append">分钟</template>
                  </el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="车辆类型" prop="vehicleTypeId" label-width="80px">
                  <el-select v-model="form.vehicleTypeId" filterable placeholder="请选择" clearable @change="selectVehicleType">
                    <el-option
                      v-for="item in vehicleTypes"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="装车预计排队时间" prop="loadCarTime" label-width="140px">
                  <el-input v-model="form.loadCarTime" clearable placeholder="装车预计排队时间">
                    <template slot="append">分钟</template>
                  </el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="车辆长度" prop="vehicleLengthId" label-width="80px">
                  <el-select v-model="form.vehicleLengthId" filterable placeholder="请选择" clearable @change="selectVehicleLengths">
                    <el-option
                      v-for="item in vehicleLengths"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="最低载重" prop="lowWeight" label-width="140px">
                  <el-input v-model="form.lowWeight" clearable placeholder="最低载重">
                    <template slot="append">吨</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="24">
                <el-form-item label="备注" prop="remark" label-width="140px">
                  <el-input
                    v-model="form.remark"
                    clearable
                    type="textarea"
                    placeholder="请输入内容"
                    :autosize="{ minRows: 4, maxRows: 8}"
                    maxlength="200"
                    show-word-limit
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
          <el-card class="box-card">
            <div slot="header">
              <span>预约</span>
            </div>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="是否预约上架" prop="isUp" label-width="140px">
                  <el-radio-group v-model="form.isUp">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col v-if="form.isUp === 1" :span="12">
                <el-form-item label="预约上架时间" prop="upTime" label-width="140px">
                  <el-date-picker
                    v-model="form.upTime"
                    type="datetime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="选择日期时间"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="是否预约下架" prop="isDown" label-width="140px">
                  <el-radio-group v-model="form.isDown">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col v-if="form.isDown === 1" :span="12">
                <el-form-item label="预约下架时间" prop="upTime" label-width="140px">
                  <el-date-picker
                    v-model="form.downTime"
                    type="datetime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="选择日期时间"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
        </el-form>
      </vue-scroll>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="cancel">取 消</el-button>
        <el-button v-loading.fullscreen.lock="fullscreenLoading" type="success" @click="save(false)">保  存</el-button>
        <el-button v-loading.fullscreen.lock="fullscreenLoading" type="primary" @click="save(true)">发  布</el-button>
      </div>
    </el-dialog>
    <div class="panel">
      <map-select v-if="showOperationShip" :show-operation.sync="showOperationShip" :match-data="matchData" :form-data="shipForm" @confirm="getShipPoints" />
      <map-select v-if="showOperationReceive" :show-operation.sync="showOperationReceive" :match-data="matchData" :form-data="receiveForm" @confirm="getPointsReceive" />
    </div>
    <el-dialog
      title="审批原因"
      :visible.sync="dialogVisible"
      width="400px"
      :before-close="handleClose"
    >
      <el-form ref="causeValue" :model="causeValue" :rules="rules" size="small" label-width="80px">
        <el-card class="box-card">
          <el-row :gutter="24">
            <el-col :span="24">
              <el-form-item label="原因" prop="cause" label-width="50px">
                <el-input
                  v-model="causeValue.cause"
                  clearable
                  type="textarea"
                  placeholder="请输入驳回原因"
                  :autosize="{ minRows: 6, maxRows: 10}"
                  maxlength="200"
                  show-word-limit
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button v-loading="fullscreenLoading" type="success" @click="save(false)">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>

import MapSelect from '@/components/map/operation.vue'
import DateRangePicker from '@/components/DateRangePicker/index'

export default {
  name: 'CreateStaff',
  filters: {
    formatStatus: function(val) {
      if (val === 'LOCK') {
        return false
      } else if (val === 'NORMAL') {
        return true
      }
      return '-'
    }
  },
  components: {
    MapSelect,
    DateRangePicker
  },
  props: ['showFormPanel', 'item'],
  data() {
    return {
      dialogVisible: false,
      tt: [],
      matchData: {},
      showOperationShip: false,
      showOperationReceive: false,
      causeValue: { cause: '信息不符，请填写正确信息' },
      showOperation: false,
      fullscreenLoading: false,
      customVal: { imgName: '' },
      showTreeDialog: false,
      selectOrgExpandAll: false,
      freightTypeCodes: [],
      vehicleLengths: [],
      vehicleTypes: [],
      merchantNames: [],
      form: this.item,
      roleOptions: [],
      receiveForm: {},
      shipForm: {},
      formLabelWidth: '85px',
      formLabelWidth1: '65px',
      isShow: this.showFormPanel,
      rules: {
        shipDetailAddress: [
          { required: true, message: '请选择出发地', trigger: 'blur' }
        ],
        startAddress: [
          { required: true, message: '出发地简称不能为空', trigger: 'blur' }
        ],
        endAddress: [
          { required: true, message: '到达地简称不能为空', trigger: 'blur' }
        ],
        receiveDetailAddress: [
          { required: true, message: '请选择到达地', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请填写货物名称', trigger: 'blur' }
        ],
        weight: [
          { required: true, message: '请填写货物数量', trigger: 'blur' }
        ],
        freightTransportCode: [
          { required: true, message: '请选择货物类型', trigger: 'blur' }
        ],
        transportAssign: [
          { required: true, message: '请选择运输公司', trigger: 'blur' }
        ],
        freightPrice: [
          { required: true, message: '请填写运输费', trigger: 'blur' }
        ],
        startDate: [
          { required: true, message: '请填写开始时间', trigger: 'blur' }
        ],
        endDate: [
          { required: true, message: '请填写结束时间', trigger: 'blur' }
        ]
      }
    }
  },
  mounted: function() {
    this.getCategory()
    this.search()
  },
  methods: {

    selectVehicleType(val) {
      if (!val) {
        this.form.vehicleTypeName = null
        return
      }
      let obj = {}
      obj = this.vehicleTypes.find((item) => {
        return item.id === val
      })
      this.form.vehicleTypeName = obj.name
    },
    getCategory() {
      const self = this
      self.$http.get('/api/baseCategory/getCateValue?key=' + 'huowu_type').then(function(value) {
        self.freightTypeCodes = value
      })
    },
    selectFreightTypeCode(val) {
      if (!val) {
        this.form.freightTransportName = null
        return
      }
      let obj = {}
      obj = this.freightTypeCodes.find((item) => {
        return item.idStr === val
      })
      this.form.freightTransportName = obj.cname
    },
    selectVehicleLengths(val) {
      if (!val) {
        this.form.vehicleLengthName = null
        return
      }
      let obj = {}
      obj = this.vehicleLengths.find((item) => {
        return item.id === val
      })
      this.form.vehicleLengthName = obj.name
    },
    selectMerchant(val) {
      this.form.transportAssigns = [] // 初始化数据
      for (let i = 0; i <= val.length - 1; i++) {
        this.transports.find((item) => { // 这里的options就是数据源
          if (item.userId == val[i]) {
            this.form.transportAssigns.push({ 'userId': item.userId, 'merchantName': item.merchantName }) // 这里的value我改成了id
          }
        })
      }
    },
    getShipPoints: function(data) {
      this.form.startAddress = data.mapAddress
      this.form.shipSubAddress = data.subAddress
      this.form.shipDetailAddress = data.address
      this.form.shipDistrictAdcode = data.adcode
      this.form.shipLngX = data.lngX
      this.form.shipLatY = data.latY
      this.form.shipProvince = data.province
      this.form.shipCity = data.city
      this.form.shipDistrict = data.district
      // this.form = Object.assign({}, this.form)
    },
    getPointsReceive: function(data) {
      this.form.endAddress = data.mapAddress
      this.form.receiveSubAddress = data.subAddress
      this.form.receiveDetailAddress = data.address
      this.form.receiveDistrictAdcode = data.adcode
      this.form.receiveLngX = data.lngX
      this.form.receiveLatY = data.latY
      this.form.receiveProvince = data.province
      this.form.receiveCity = data.city
      this.form.receiveDistrict = data.district
      // this.form = Object.assign({}, this.form)
    },
    selectShipAddress() {
      this.matchData = {}
      this.showOperationShip = true
    },
    selectReceiveAddress() {
      this.matchData = {}
      this.showOperationReceive = true
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    search() {
      const self = this
      self.$http.get('/api/systemController/getVehicleType').then(function(value) {
        if (value.ok) {
          self.vehicleLengths = value.data.vehicleLengths
          self.vehicleTypes = value.data.vehicleTypes
        }
      })
      self.$http.get('/api/systemController/getTransport').then(function(value) {
        if (value.ok) {
          self.transports = value.data
        }
      })
      self.$http.get('/api/systemController/getMerchantAll').then(function(value) {
        if (value.ok) {
          self.merchant = value.data
        }
      })
    },
    save(val) {
      const self = this
      self.$refs['form'].validate((valid) => {
        if (valid) {
          self.fullscreenLoading = true
          self.form.falg = val
          self.$http.post('/api/shippingReleased', self.form)
            .then(function(res) {
              self.fullscreenLoading = false
              self.cancel()
              if (val) {
                self.$message.success('发布成功，货物审核中！')
                // 关闭当前标签
                self.$emit('/supplyOrder/unconfirmed')
                // 跳转到list
                self.$router.push('/freightManagement/shippingReleased')
              } else {
                self.$message.success('保存成功')
              }
            }).catch(function(error) {
              self.fullscreenLoading = false
              console.log(error)
            })
        }
      })
    },
    cancel() {
      this.isShow = false
      this.$emit('update:showFormPanel', this.isShow)
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
  margin-bottom: 10px;
}
.mark-body{
  position:fixed;
  left:0px;
  top:0px;
  background:rgba(0, 0, 0, 0.18);
  width:100%;  /*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/
  height:100%;
  filter:alpha(opacity=60);  /*设置透明度为60%*/
  opacity:0.6;  /*非IE浏览器下设置透明度为60%*/
  z-Index:999;
}
aside {
  /* background: #eef1f6; */
  /* padding: 6px 5px; */
  background: none;
  padding: 0px 24px;
  margin-bottom: 1px;
  border-radius: 2px;
  display: block;
  /* line-height: 50px; */
  /* font-size: 48px; */
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
  color: #2c3e50;
  /* -webkit-font-smoothing: antialiased; */
  -moz-osx-font-smoothing: grayscale;
}
</style>
